<template>
  <div>
    <!-- class="project-list-container" -->
    <div>
      <div class="list-h">
        <el-button
          type="primary"
          v-auth="`project-funds-1-add`"
          @click="handleAdd"
          class="add-option"
          >新增</el-button
        >
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formInline"
          ref="formRef"
          @submit.prevent
        >
          <el-form-item label="承担单位" prop="deptName">
            <el-input
              v-model.trim="formInline.deptName"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>

          <el-form-item label="资金来源" prop="fundsSource">
            <el-select
              v-model="formInline.fundsSource"
              clearable
              class="width-custom120"
            >
              <el-option
                v-for="item in FUNDS_SOURCE"
                :key="item.dicCode"
                :label="item.dicValue"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="经费类别" prop="feeTypeName">
            <el-select
              v-model="formInline.feeTypeName"
              clearable
              class="width-custom120"
            >
              <el-option
                v-for="item in FUNDING_CATEGORY"
                :key="item.dicCode"
                :label="item.dicValue"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="填报人" prop="createUserName">
            <el-input
              v-model.trim="formInline.createUserName"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="填报时间">
            <el-date-picker
              class="width-custom220"
              v-model="timeValue"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD hh:mm:ss"
              @change="handleChangeDate"
            />
          </el-form-item>
          <el-form-item label="审批状态" prop="companyNameLike">
            <el-select
              v-model="formInline.approveStatus"
              filterable
              class="width-custom120"
            >
              <el-option
                v-for="item in APPROVAL_STATUS"
                :key="item.dicCode"
                :label="item.dicValue"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          :data="state.tableData"
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <!-- <el-table-column
            prop="companyName"
            label="单据编号"
          ></el-table-column> -->
          <el-table-column prop="deptName" label="承担单位"></el-table-column>
          <el-table-column label="资金来源">
            <template #default="{ row }">
              {{
                FUNDS_SOURCE.find(el => el.dicCode === row.fundsSource).dicValue
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="feeTypeName"
            label="经费类别"
          ></el-table-column>
          <el-table-column
            prop="spendAmount"
            label="经费金额"
          ></el-table-column>

          <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
          <el-table-column
            prop="createUserName"
            label="填报人"
          ></el-table-column>
          <el-table-column prop="createTime" label="填报时间"></el-table-column>
          <el-table-column label="审批状态">
            <template #default="{ row }">
              {{
                APPROVAL_STATUS.find(el => el.dicCode === row.approveStatus)
                  .dicValue
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template #default="{ row }">
              <el-button type="text" @click="handleLook(row)">查看</el-button>
              <el-button
                v-if="row.approveStatus === '1' || row.approveStatus === '4'"
                type="text"
                @click="handleEdit(row)"
                >编辑</el-button
              >
              <!-- -->
              <el-button
                v-if="row.approveStatus === '2' && row.canAuth == '1'"
                type="text"
                @click="handleAppr(row)"
                >审核</el-button
              >

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该条记录吗？"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button v-auth="`project-funds-1-del`" type="text"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-skeleton>
    </div>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />

    <el-dialog
      :title="
        mode === 'add' ? '添加经费' : mode === 'edit' ? '编辑经费' : '查看经费'
      "
      v-model="dialogFormVisible"
      destroy-on-close
      width="45vw"
    >
      <AddFundsDialog
        :mode="mode"
        :companyInfo="state.companyInfo"
        @emitSubmit="onEmitSubmit"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { FUNDS_SOURCE, FUNDING_CATEGORY, APPROVAL_STATUS } from "../types";
</script>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getFeeSpendList, delFeeSpend } from "/@/api/funds";
import NotifMessage from "/@/utils/message/notification";
// import RePagination from "/@/components/RePagination/index.vue";

import AddFundsDialog from "./AddFundsDialog.vue";

const route = useRoute();

const formRef = ref<HTMLFormElement | null>(null) as any;

let loading = ref<boolean>(false);

let dialogFormVisible = ref<boolean>(false);

let total = ref<number>(0);

let timeValue = ref(null);

let formInline = reactive<any>({
  deptName: "",
  feeTypeName: "",
  fundsSource: "",
  approveStatus: "",
  pageSize: 10,
  pageNum: 1,
  createTimeStrStart: "",
  createTimeStrEnd: "",
  projectId: route.query.id,
  createUserName: ""
});

let mode = ref<string>("add");

let state = reactive({
  tableData: [],
  companyInfo: {}
});

// 请求列表表格数据
async function getTableData(obj: object = {}) {
  // 真实请求待添加
  loading.value = true;
  try {
    const { code, data } = await getFeeSpendList(obj);
    if (code === 200) {
      state.tableData = data.list;
      total.value = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}
// 打开弹窗
const handleAdd = (): void => {
  mode.value = "add";
  dialogFormVisible.value = true;
};

// 操作
const onEmitSubmit = (isSubmit: boolean) => {
  dialogFormVisible.value = false;
  if (isSubmit) {
    getTableData(formInline);
  }
};

// 清除表单，重置
const handleReset = () => {
  timeValue.value = null;
  handleChangeDate(null);
  formInline.pageNum = 1;
  formRef.value.resetFields();
};

const handleChangeDate = item => {
  if (item) {
    formInline.createTimeStrStart = item[0];
    formInline.createTimeStrEnd = item[1];
  } else {
    formInline.createTimeStrStart = "";
    formInline.createTimeStrEnd = "";
  }
};

// 根据条件进行搜索
const handleSearch = (): void => {
  getTableData(formInline);
};

// 删除记录
const handleDelete = async item => {
  try {
    const { code, message } = await delFeeSpend(item.id);
    if (code === 200) {
      NotifMessage.success(`${message}`);
      getTableData(formInline);
    } else {
      NotifMessage.error(`${message}`);
    }
  } catch (err) {
    console.log(err);
  }
};

const handleAppr = (row): void => {
  mode.value = "approve";
  dialogFormVisible.value = true;
  state.companyInfo = row;
};

const handleLook = (row): void => {
  mode.value = "look";
  dialogFormVisible.value = true;
  state.companyInfo = row;
};

const handleEdit = row => {
  dialogFormVisible.value = true;
  mode.value = "edit";
  state.companyInfo = row;
};

// 请求数据
getTableData(formInline);
</script>
